<template>
  <div class="song-sheet music-cpns-common" ref="songRef">
    <song-brief
      :songList="playlist"
      :dataList="songsList"
      v-if="playlist"
    ></song-brief>
    <div class="songstable" style="width: 90%; margintop: 20px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="marginleft: 50px"
      >
        <el-tab-pane label="歌曲列表" name="frist">
          <page-music-table
            :contentTableConfig="contentTableConfig"
            :dataList="songsList"
            :lookShow="lookShow"
            :propName="propName"
            @handleShowAll="handleShowAll"
            @hanelDbPlay="hanelDbPlay"
          >
            <template #doing="scope">
              <a href="404" @click.prevent.stop="addCollect(scope.row)">
                <el-icon v-show="!scope.row.flag" class="table-icon"
                  ><star
                /></el-icon>
                <el-icon v-show="scope.row.flag" class="table-icon"
                  ><star-filled
                /></el-icon>
              </a>
              <a href="#" @click.prevent.stop="startDown(scope.row)">
                <el-icon class="table-icon"><download /></el-icon>
              </a>
            </template>
          </page-music-table>
        </el-tab-pane>
        <el-tab-pane :label="comentCount" name="second">
          <song-comment
            :songId="id"
            @handleTop="handleTop"
            ref="commentRef"
          ></song-comment>
        </el-tab-pane>
        <el-tab-pane label="收藏者" name="third">
          <song-collect :songId="id" ref="collectRef"></song-collect>
        </el-tab-pane>
      </el-tabs>
      <div class="find" style="width: 180px; height: 40px">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          size="mini"
          suffix-icon="el-icon-search"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import PageMusicTable from '@/components/page-find-music/page-news-music/page-music-table'
import SongComment from '@/base-ui/comment'
import SongCollect from '../cpns/song-collect.vue'
import SongBrief from '../cpns/song-brief.vue'

import { contentTableConfig } from '../config/table-config'
import { InitDoing } from '../hook/song-sheet'

export default defineComponent({
  name: 'songsheet',
  components: { SongBrief, PageMusicTable, SongComment, SongCollect },
  setup() {
    const propName = { time: 'dt', artists: 'ar', album: 'al' }
    const {
      playlist,
      activeName,
      input,
      handleClick,
      songsList,
      lookShow,
      handleShowAll,
      addCollect,
      startDown,
      comentCount,
      id,
      songRef,
      handleTop,
      commentRef,
      collectRef,
      hanelDbPlay,
      likeFlag
    } = InitDoing()
    return {
      playlist,
      activeName,
      input,
      handleClick,
      contentTableConfig,
      songsList,
      lookShow,
      handleShowAll,
      propName,
      addCollect,
      startDown,
      comentCount,
      id,
      songRef,
      handleTop,
      commentRef,
      collectRef,
      hanelDbPlay,
      likeFlag
    }
  }
})
</script>

<style lang="less">
.song-sheet {
  width: 98%;
  padding-top: 30px;
  .songstable {
    position: relative;
    width: 90%;
    margin: 0 auto;
    .el-tabs__header {
      margin: 0 0 5px;
    }
    .table-icon {
      color: #ccc;
      font-size: 17px;
      margin-right: 5px;
    }
    .table-icon:hover {
      color: red;
    }
    .find {
      position: absolute;
      top: 0px;
      right: 0;
    }
  }
}
</style>
